<template>
  <dv-border-box-1 style="height:550px">
    <div id="border">
      <el-collapse v-model="activeName" accordion>
        <el-collapse-item title="文章属性" name="1">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <!-- 表单 -->
              <el-form
                style="margin-left:20px"
                ref="searchForm"
                :inline="true"
                :model="searchMap"
                class="demo-form-inline"
              >
                <el-form-item prop="categoryname">
                  <el-cascader
                    filterable
                    @change="fetchByCategory"
                    placeholder="点击这里选择分类信息"
                    size="medium"
                    :options="options"
                    v-model="searchMap.categoryname"
                    :props="{ checkStrictly: true,value:'label' }"
                    clearable
                  ></el-cascader>
                </el-form-item>
                <el-form-item prop="key">
                  <el-input @blur="handleSearchKeyChange" v-model="searchMap.key" placeholder="关键词"></el-input>
                </el-form-item>

                <el-form-item prop="daterange">
                  <el-date-picker
                    v-model="searchMap.daterange"
                    type="daterange"
                    range-separator="至"
                    value-format="yyyy-MM-dd"
                    start-placeholder="发布日期(始)"
                    end-placeholder="发布日期(至)"
                  ></el-date-picker>
                </el-form-item>

                <el-form-item label="审核状态" prop="state">
                  <el-select
                    size="small"
                    @change="fetchData"
                    width="50"
                    v-model="searchMap.state"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in StateOptionsOfSearch"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="热门文章" prop="ishot">
                  <el-switch
                    v-model="searchMap.ishot"
                    active-color="#13ce66"
                    inactive-color="grey"
                    active-value="1"
                    inactive-value="0"
                    @change="handleIshotChange"
                  ></el-switch>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="fetchData()">查询</el-button>
                  <el-button @click="resetForm('searchForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-collapse-item>
      </el-collapse>

      <!-- 表格 -->
      <el-table :data="list" style="height:450px;width: 100%" height="450">
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="aid" label="文章编号" width="90"></el-table-column>
        <el-table-column prop="title" label="文章标题" width="190"></el-table-column>
        <el-table-column prop="categoryname" label="分类" width="190"></el-table-column>

        <el-table-column prop="state" label="审核状态" width="130">
          <template slot-scope="scope">
            <el-tag :type="scope.row.state === '1' ? '' : 'info'">
              {{
              scope.row.state | stateTypeFilter
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="热门文章" width="130">
          <template slot-scope="scope">
            <el-tag :type="scope.row.ishot === '1' ? '' : 'info'">
              {{
              scope.row.ishot ==1? '热门':"非热门"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="publishtime" label="发布时间" width="150">
          <template slot-scope="scope">
            {{
            scope.row.publishtime | dateFilter
            }}
          </template>
        </el-table-column>
        <el-table-column prop="lastupdate" label="最后更新时间" width="150">
          <template slot-scope="scope">
            {{
            scope.row.lastupdate | dateFilter
            }}
          </template>
        </el-table-column>
        <el-table-column prop="thumbup" label="点赞数" width="80"></el-table-column>
        <el-table-column prop="commentnum" label="评论数" width="80"></el-table-column>

        <el-table-column fixed="right" label="操作" width="200px">
          <template slot-scope="scope">
            <el-popover
              style="background-color:black"
              trigger="hover"
              placement="left"
              width="40px"
            >
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-button
                    style="margin-left:5px"
                    type="warning"
                    size="mini"
                    plain
                    @click="handleThubmup(scope.row.aid)"
                  >点赞</el-button>
                </el-col>
                <el-col :span="12">
                  <el-button
                    style="float:left"
                    size="mini"
                    type="danger"
                    round
                    @click="handleComment(scope.row.aid,scope.row.title,scope.row.userid)"
                  >评论</el-button>
                </el-col>
              </el-row>
              <el-button type="primary" size="mini" plain slot="reference">操作</el-button>
            </el-popover>
            <el-button size="mini" @click="handleEdit(scope.row.aid)">编辑</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row.aid)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        style="margin-left:40px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- 文章编辑dialog -->
      <el-dialog
        @close="handleArticleDialog"
        modal
        title="编辑文章"
        :visible.sync="outerVisible"
        height="800px"
        width="480px"
      >
        <el-dialog fullscreen title="文章内容" :visible.sync="innerVisible" append-to-body>
          <el-card class="box-card" shadow="hover" style="height:100%;overflow:auto">
            <div class="markdown-body" v-html="compileMarkdown" />
            <!-- <mavon-editor
              v-html="pojo.content_html"
              fontSize="16px"
           
            />-->
          </el-card>
          <el-button
            circle
            :type="pojo.article.state === '1' ? 'info' : 'success'"
            :icon="pojo.article.state === '1' ? '' : 'el-icon-check'"
            style="float:right;margin:10px 20px 0 0"
            plain
            :disabled="pojo.article.state === '1' ? true : false"
            @click="checkArticle()"
          >{{ pojo.state === "1" ? "已审核" : "审核" }}</el-button>

          <!-- <quill-editor
            v-model="pojo.content"
            @change="onEditorChange($event)"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @ready="onEditorReady($event)"
            :options="editorOption"
            ref="myQuillEditor"
          ></quill-editor>-->
        </el-dialog>
        <el-form
          :model="pojo"
          ref="pojoForm"
          :rules="rulesDialog"
          label-position="right"
          label-width="99px"
          size="mini"
        >
          <el-form-item label="标题" prop="article.title">
            <el-input width="60px" v-model="pojo.article.title" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="发布时间" prop="article.publishtime">
            {{
            pojo.article.publishtime | dateFilter
            }}
          </el-form-item>

          <el-form-item label="最后修改时间" prop="article.lastupdate">
            {{
            pojo.article.lastupdate | dateFilter
            }}
          </el-form-item>

          <el-form-item label="是否公开" prop="article.ispublic">
            <el-tooltip :content="pojo.article.ispublic === '1' ? '公开' : '不公开'" placement="top">
              <el-switch
                v-model="pojo.article.ispublic"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleisPublicChange"
              ></el-switch>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="是否热门" prop="article.ishot">
            <el-tooltip :content="pojo.article.ishot === '1' ? '热门' : '取消热门'" placement="top">
              <el-switch
                v-model="pojo.article.ishot"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleishotChange"
              ></el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="是否置顶" prop="article.istop">
            <el-tooltip :content="pojo.article.istop === '1' ? '置顶' : '取消置顶'" placement="top">
              <el-switch
                v-model="pojo.article.istop"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleistopChange"
              ></el-switch>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="是否开启评论" prop="article.iscomment">
            <el-tooltip :content="pojo.article.iscomment === '1' ? '开启' : '关闭'" placement="top">
              <el-switch
                v-model="pojo.article.iscomment"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleisCommentChange"
              ></el-switch>
            </el-tooltip>
          </el-form-item>

          <el-form-item label="点赞数" prop="article.thumbup" width="60px">
            <!-- <el-input v-model="pojo.thumbup" autocomplete="off"></el-input> -->
            <el-input readonly size="small" width="20px" v-model="pojo.article.thumbup" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="评论数" prop="article.commentnum">
            <el-input readonly width="20px" v-model="pojo.article.commentnum" autocomplete="off"></el-input>
          </el-form-item>

          <el-form-item label="审核状态" prop="article.state">
            <el-tooltip :content="pojo.article.state === '1' ? '已审核' : '未审核'" placement="top">
              <el-switch
                disabled
                v-model="pojo.article.state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                active-value="1"
                inactive-value="0"
                @change="handleStateChangeDialog"
              ></el-switch>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="分类">{{castName}}</el-form-item>

          <el-form-item label="选择新分类" prop="categoryName">
            <el-cascader
              filterable
              placeholder="点击这里选择分类信息"
              size="medium"
              :options="options"
              v-model="pojo.categoryInfo.categoryName"
              :props="{ checkStrictly: true,value:'label' }"
              clearable
            ></el-cascader>
          </el-form-item>
          <!-- 文章所属标签管理 -->
          <el-form-item label="标签" prop="article.tags">
            <el-tag
              :key="index"
              v-for="(tag, index) in pojo.article.tags"
              closable
              :disable-transitions="false"
              @close="handleClose(tag)"
            >{{ tag.tagname }}</el-tag>

            <el-button class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="outerVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateData('pojoForm')">修改</el-button>
          <el-button @click="innerVisible = true">文章详情</el-button>
        </div>
      </el-dialog>
      <!-- 发布评论 -->
      <el-dialog title="发表评论" :visible.sync="dialogCommentFormVisible">
        <el-form :model="pojoComment" ref="replyForm" :rules="replyRules">
          <el-form-item label="文章id" label-width="80px">
            <el-input v-model="pojoComment.articleid" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="标题" label-width="80px">
            <el-input v-model="pojoComment.title" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label-width="80px" prop="content">
            <el-input
              type="textarea"
              v-model="pojoComment.content"
              placeholder="回复内容"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogCommentFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="publishComment()">回 复</el-button>
        </div>
      </el-dialog>
      <!-- 选择分类对话框 -->
      <el-dialog title="选择分类" :visible.sync="dialogCategoryVisible" width="500px">
        <category @option-category="optionCategory" :isDialog="true"></category>
      </el-dialog>
      <!-- 选择标签对话框 -->
      <el-dialog title="选择标签" :visible.sync="dialogTagVisible" width="500px">
        <tag @option-tag="optionTag" :isTagDialog="true"></tag>
      </el-dialog>
    </div>
  </dv-border-box-1>
</template>

<script>
import marked from "marked";
import hljs from "highlight.js";
import "mavon-editor/dist/css/index.css";
import articleApi from "@/api/article";
import commentApi from "@/api/comment";
import categoryApi from "@/api/category";
// import { quillEditor } from "vue-quill-editor";
import { types } from "util";
import Category from "@/views/article/category.vue";
import Tag from "@/views/article/tag.vue";
import moment from "moment";

// import func from '../../../vue-temp/vue-editor-bridge';
const stateTypeOptions = [
  { type: "0", statename: "未审核" },
  { type: "1", statename: "已审核" }
];
export default {
  components: {
    Category,
    Tag
  },
  data() {
    return {
      StateOptionsOfSearch: [
        {
          value: "2",
          label: "全部"
        },
        {
          value: "1",
          label: "已审核"
        },
        {
          value: "0",
          label: "未通过审核"
        }
      ],
      activeName: "",
      options: [], //分类选择列表
      pojoComment: {
        articleid: "", //文章id
        title: "", //文章标题
        content: "",
        targetid:""
      },
      // tagList: [], //标签总列表
      //tagListNew: [], //新添加的标签
      isSearch: false, //是否为查询
      editorOption: {
        modules: {
          toolbar: [
            [{ size: ["small", false, "large"] }],
            ["bold", "italic"],
            [{ list: "ordered" }, { list: "bullet" }],
            ["link", "image"]
          ]
        }
      },
      currentPage: 1,
      pageSize: 10,
      total: 0,
      list: [],
      searchMap: {
        categoryname: [],
        key: "",
        state: "",
        daterange: [],
        ishot: ""
      },
      pojo: {
        article: {
          aid: "",
          title: "",
          contentMd: "",
          publishtime: "",
          lastupdate: "",
          ispublic: "",
          ishot: "",
          istop: "",
          thumbup: 0,
          commentnum: 0,
          state: "",
          iscomment: "",
          tags: ""
        },
        categoryInfo: {
          aid: "",
          categoryName: "",
       
        }
      },
      rulesDialog: {
        "article.title": [
          { required: true, message: "文章标题不能为空", trigger: "blur" }
        ]
      },
      replyRules: {
        content: [
          {
            required: true,
            message: "客官，写点什么再评论吧~",
            trigger: "blur"
          }
        ]
      },
      dialogCommentFormVisible: false, //发表评论窗口
      dialogTagVisible: false, //选择标签对话框
      dialogCategoryVisible: false, //选择分类对话框
      outerVisible: false, //外层dialog
      innerVisible: false //内层dialog
    };
  },

  created() {
    this.fetchData();
    this.fetchCategoryTree();
  },
  mounted() {
    //console.log("app init, my quill insrance object is:", this.myQuillEditor);
    /*setTimeout(() => { this.content = 'i am changed' }, 3000)*/
  },
  computed: {
    castName: function() {
      return String(this.pojo.categoryInfo.categoryName).replace(/\,/g, "/");
    },
    compileMarkdown: {
      cache: false,
      get() {
       // console.log(this.pojo.article.contentMd)
        return marked(
          this.pojo.article.contentMd === undefined
            ? "#### 未发布"
            : this.pojo.article.contentMd,
          {
            breaks: true,
            highlight: function(code) {
              //新加的，用来配置语法高亮
              return hljs.highlightAuto(code).value;
            }
          }
        );
      }
    }
    // editor() {
    //   return this.$refs.myQuillEditor.quill;
    // }
  },
  methods: {
    /**
     * 选中分类变化时
     */
    fetchByCategory(value) {
      this.fetchData();
    },
    fetchCategoryTree() {
      categoryApi.fetchCategoryTree().then(resp => {
        if (resp.data.flag) {
          //正则替换key的名
          this.options = JSON.parse(
            JSON.stringify(resp.data.data)
              .replace(/id/g, "value")
              .replace(/cname/g, "label")
          );
        }
      });
    },
    /* onEditorBlur(editor) {
      // console.log("editor blur!", editor);
    },
    onEditorFocus(editor) {
      //console.log("editor focus!", editor);
    },
    onEditorReady(editor) {
      //console.log("editor ready!", editor);
    },
    onEditorChange({ editor, html, text }) {
      //console.log("editor change!", editor, html, text);
      this.pojo.content = html;
    },*/
    fetchData() {
      this.searchMap.categoryname = String(this.searchMap.categoryname).replace(
        /\,/g,
        "/"
      );
      articleApi
        .searchPage(this.currentPage, this.pageSize, this.searchMap)
        .then(resp => {
          const respData = resp.data;
          if (respData.flag) {
            this.list = respData.data.rows;
            this.total = respData.data.total;
            console.log(this.list);
          } else {
            this.$message({
              message: respData.message,
              type: "warning"
            });
          }
        });
    },
    /**
     * 打开发表评论窗口
     */
    handleComment(aid, title,targetid) {
      this.$nextTick(() => {
        this.$refs["replyForm"].resetFields();
      });
      this.pojoComment.articleid = aid;

      this.pojoComment.title = title;
      this.pojoComment.targetid=targetid

      this.dialogCommentFormVisible = true;
    },
    /**
     * 发布评论
     */
    publishComment() {
      this.$refs.replyForm.validate(valid => {
        if (valid) {
          commentApi
            .publishComment(this.pojoComment)
            .then(resp => {
              if (resp.data.flag) {
                this.$message({
                  type: "success",
                  message: resp.data.message
                });
                this.dialogCommentFormVisible=false
                this.fetchData()
              }
            });
        }
      });
    },
    /**
     * 页大小改变
     */
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    /**
     * 当前页改变
     */
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    /**
     * 打开编辑窗口，回显数据
     */
    handleEdit(id) {
      // console.log(this.tagListNew);
      this.outerVisible = true;
      this.$nextTick(() => {
        this.$refs["pojoForm"].resetFields();
      });
      articleApi.findArticleById(id).then(resp => {
        const respData = resp.data;
        if (respData.flag) {
          this.pojo = respData.data;
          //console.log(typeof this.pojo.categoryName );
          // this.pojo.content_md = marked(newData[0].content || "", {
          //   sanitize: true
          // });
        } else {
          this.$message({
            type: "warning",
            message: respData.message
          });
        }
      });
      /* articleApi.findTagListByArticleId(id).then(resp2 => {
        const resp2Data = resp2.data;
        if (resp2Data.flag) {
          this.tagList = resp2Data.data;
        } else {
          this.$message({
            type: "warning",
            message: resp2Data.message
          });
        }
      });*/
    },
    /**
     * 点赞
     */
    handleThubmup(aid) {
      articleApi.thumbup(aid).then(resp => {
        if (resp.data.flag) {
          this.$message({
            type: "success",
            message: resp.data.message
          });
          this.fetchData();
        }
      });
    },
    /**
     * 文章修改
     */
    updateData(formName) {
      this.$refs.pojoForm.validate(valid => {
        if (valid) {
          //提交更新
         // console.log(this.pojo.categoryInfo)
          this.pojo.categoryInfo.categoryName = String(this.pojo.categoryInfo.categoryName).replace(
            /\,/g,
            "/"
          );
          articleApi.update(this.pojo).then(resp => {
            const respData = resp.data;
            if (respData.flag) {
              this.$message({
                message: respData.message,
                type: "success"
              });

              this.fetchData();
            } else {
              this.$message({
                message: respData.message,
                type: "warning"
              });
            }
          });
        } else {
          this.$message({
            message: "文章标题不能为空",
            type: "warning"
          });
        }

        //添加了新的标签
        /*   articleApi
          .addTagsForArticle(this.pojo.aid, this.tagListNew)
          .then(resp2 => {
            if (resp2.data.flag) {
              this.$message({
                message: resp2.data.message,
                type: "success"
              });
            } else {
              this.$message({
                message: resp2.data.message,
                type: "warning"
              });
              return;
            }
          });*/

        this.outerVisible = false;
      });
    },
    /**
     * 删除文章
     */
    handleDelete(id) {
      this.$confirm("确定移除此文章吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          articleApi.deleteById(id).then(resp => {
            this.$message({
              type: resp.data.flag ? "success" : "error",
              message: "删除成功!"
            });
            if (resp.data.flag) {
              this.fetchData();
            }
          });
        })
        .catch(() => {
          return;
        });
    },
    /**
     * 表单审核状态改变，查询中的
     */
    handleStateChange(val) {
      this.searchMap.state = val;
      //console.log(this.searchMap.state);
    },
    /**
     * 表单审核状态改变，dialog中的
     */
    handleStateChangeDialog(val) {
      this.pojo.article.state = val;
    },

    /**
     * 是否公开变化
     */
    handleisPublicChange(val) {
      this.pojo.article.ispublic = val;
    },
    /**
     * 搜索关键字失去焦点时触发
     */
    handleSearchKeyChange() {
      if (this.searchMap.key !== "") {
        this.fetchData();
      }
    },
    /**
     * 表单是否热门改变(搜索)
     */
    handleIshotChange(val) {
      this.searchMap.ishot = val;
      this.fetchData();
      // console.log(this.searchMap.ishot);
    },
    /**
     * 是否热门
     */
    handleishotChange(val) {
      this.pojo.article.ishot = val;
    },
    /**
     * 是否置顶
     */
    handleistopChange(val) {
      this.pojo.article.istop = val;
    },
    /**
     * 是否开启评论
     */
    handleisCommentChange(val) {
      this.pojo.article.iscomment = val;
    },

    /**
     * 选择分类并回显
     */
    optionCategory(currentRow) {
      if (currentRow.state === "0") {
        this.$message({
          type: "warning",
          message: "该分类已弃用不可使用！"
        });
        return false;
      }
      if (this.isSearch) {
       // this.searchMap.categoryname = currentRow.cname;
        this.isSearch = false;
      } else {
        this.pojo.categoryInfo.categoryName = currentRow.cname; //分类id
      }
      this.dialogCategoryVisible = false;
    },
    /**
     * 文章审核
     */
    checkArticle() {
      this.$confirm("确定要审核此文章吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      }).then(() => {
        articleApi.checkArticle(this.pojo.article.aid).then(resp => {
          this.$message({
            type: resp.data.flag ? "success" : "error",
            message: resp.data.message
          });
          if (resp.data.flag) {
            this.innerVisible = false;
            this.fetchData();
            this.pojo.article.state = "1";
            //  this.findArticleById();
          }
        });
      });
    },
    /**
     *移除标签触发
     */
    handleClose(tag) {
      this.pojo.article.tags.splice(this.pojo.article.tags.indexOf(tag), 1);
    },
    /**
     * 展示添加标签输入框
     */
    showInput() {
      this.dialogTagVisible = true; //打开标签管理组件
    },
    /**
     * 选择标签后数据回显
     */
    optionTag(currentRow) {
      if (currentRow.state === "0") {
        this.$message({
          type: "warning",
          message: "该标签已弃用,不可使用！"
        });
        return false;
      }
      let inputValue = currentRow;

      if (inputValue) {
        const obj2 = this.pojo.article.tags.find(obj => {
          return obj === inputValue;
        });
        if (obj2 !== null) {
          //已经存在该标签
          this.$message({
            type: "warning",
            message: "您已经添加了该标签哦"
          });
          return;
        } else {
          this.pojo.article.tags.push(currentRow); //添加到tagListNew
        }

        // console.log(inputValue);
        //  this.tagList.push(currentRow);
      }
      this.dialogTagVisible = false; // 标签组件关闭
    },
    /**
     * 文章编辑窗口关闭前清空数据
     */
    handleArticleDialog() {
      this.pojo = {};
    },
    /**
     * 查询form重置
     */
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  filters: {
    stateTypeFilter(type) {
      const stateobj = stateTypeOptions.find(obj => {
        return obj.type === type;
      });
      return stateobj ? stateobj.statename : null;
    },
    dateFilter(input, formatString = "YYYY-MM-DD HH:mm:ss") {
      return moment(input).format(formatString);
    }
  }
};
</script>

<style scoped>
#border {
  padding: 20px;
}

.el-switch__label--left {
  position: relative;
  left: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label--right {
  position: relative;
  right: 46px;
  color: #fff;
  z-index: -1111;
}
.el-switch__label.is-active {
  z-index: 1111;
  color: #fff;
}

.el-switch__label--right.is-active {
  z-index: 1111;
  color: #fff !important;
}
.el-switch__label--left.is-active {
  z-index: 1111;
  color: #9c9c9c !important;
}
/* 文章标签管理 */
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>
